<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/echarts.min.js"></script>
</head>
<body>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1536px;height:864px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  var option = {

  }
  // 指定图表的配置项和数据
  var yearlist = ['2020','2021','2022','2023',1,2,3,4,5,6,7,8,9];
  // 指定每个年份的大学排名  用来做x轴
  var scohool_list=['1','2','3','4']
  // 2020-2023年的获奖排名， 用来做y轴数据
  dataset=[
    [77,58,52,46,46,40,34,28,26,25,24,24,23,23,22,21,20,20,16,15],
    [55,44,35,33,27,27,20,19,18,17,17,16,16,14,13,12,11,10,9,8],
    [36,25,21,15,12,12,8,8,8,7,7,6,6,6,6,5,4,4,4,3],
    [250,151,124,97,92,89,80,69,61,54,49,47,45,36,32,25,24,21,20,20]
  ]


  var option = {
    timeline:{
      axisType: 'category',
      autoPlay: true, // 是否自定播放
      playInterval: 3000, //播放速度 毫秒
      data: yearlist,
      label:{
        fontSize: 18
      }
    },
    baseOption:{
      title: {
        text: '2020GDP',
        left: 'center',
        textStyle:{
          fontSize:24
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      legend: {
      },
      grid: {
        left: '10%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: [
        {
          type:'category',
          // data: countryList,
          data:scohool_list,
          axisPointer: {
            type: 'shadow'
          },

          axisLabel: {
            formatter: function (value) {
              // return '{' + value + '| }\n{value|' + value + '}';
              return value ;
            },
            margin: 20,
          }

        },
      ],
      yAxis:[
        {
          name:'数量',
          type:'value',
          nameTextStyle:{
            fontSize:18
          },
          axisLabel:{
            fontSize:18
          }
        },
      ],
      series: [
        {
          type: 'bar',
          data: scohool_list[0],
          label:true,
        },
      ]
    },
    options:[
      {
        title:{
          show:true,
          text:2020+'GDP',
          left: 'center',
          textStyle:{
            fontSize:24
          }
        },
        xAxis: [
          {
            type:'category',
            data:scohool_list,
            axisPointer: {
              type: 'shadow'
            },

            axisLabel: {
              formatter: function (value) {
                // return '{' + value + '| }\n{value|' + value + '}';
                return value ;
              },
              interval:0,
              rotate:90,
              // margin: 20,
            }
          },
        ],
        series: [
          { data: dataset[0],
            label:{show:true,} },
        ]
      },
      {
        title:{
          show:true,
          text:2021+'年互联网+获奖信息',
          left: 'center',
          textStyle:{
            fontSize:24
          }
        },
        xAxis: [
          {
            type:'category',
            // data: countryList,
            data:scohool_list,
            axisPointer: {
              type: 'shadow'
            },

            axisLabel: {
              formatter: function (value) {
                // return '{' + value + '| }\n{value|' + value + '}';
                return value ;
              },
              interval:0,
              rotate:90,
              // margin: 20,
            }
          },
        ],
        series: [
          { data: dataset[1],
            label:{show:true,} },
        ]
      },
      {
        title:{
          show:true,
          text:2022+'年互联网+获奖信息',
          left: 'center',
          textStyle:{
            fontSize:24
          }
        },
        xAxis: [
          {
            type:'category',
            // data: countryList,
            data:scohool_list[2],
            axisPointer: {
              type: 'shadow'
            },

            axisLabel: {
              formatter: function (value) {
                // return '{' + value + '| }\n{value|' + value + '}';
                return value ;
              },
              interval:0,
              rotate:90,
              // margin: 20,
            }
          },
        ],
        series: [
          { data: dataset[2],
            label:{show:true,} },
        ]
      },
      {
        title:{
          show:true,
          text:2023+'年互联网+获奖信息',
          left: 'center',
          textStyle:{
            fontSize:24
          }
        },
        xAxis: [
          {
            type:'category',
            // data: countryList,
            data:scohool_list[3],
            axisPointer: {
              type: 'shadow'
            },

            axisLabel: {
              formatter: function (value) {
                // return '{' + value + '| }\n{value|' + value + '}';
                return value ;
              },
              interval:0,
              rotate:90,
              // margin: 20,
            }
          },
        ],
        series: [
          { data: dataset[3],
            label:{show:true,}},
        ]
      },
    ]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>
</body>

</body>
</html>
